<template>
  <el-row>
    <el-card>
      <el-button type="primary" @click="addItem">{{ $t('appMarketing.splashScreen.add') }}</el-button>
      <p>{{ $t('appMarketing.splashScreen.tip') }}</p>
      <el-row>
        {{ $t('appMarketing.splashScreen.pushMethod') }}
        <el-button type="primary" @click="pushWay">{{ pushWayTitle }}</el-button>
      </el-row>
    </el-card>
    <el-card>
      <el-table
        v-loading="loading"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="tableData"
        border
        :stripe="true"
        style="width: 100%"
      >
        <el-table-column
          fixed="left"
          prop="id"
          :label="tableText['serialNumber']"
          min-width="80"
        />
        <el-table-column
          fixed="left"
          prop="name"
          :label="tableText['name']"
          min-width="120"
        />
        <el-table-column
          prop="createTime"
          :label="tableText['createTime']"
          min-width="170"
        />
        <el-table-column
          prop="jumpLink"
          :label="tableText['link']"
          min-width="100"
        />
        <el-table-column
          prop="putawayBeginTime"
          :label="tableText['shelfPeriod']"
          min-width="300"
        >
          <template slot-scope="scope">
            {{ (scope.row['putawayBeginTime'] && scope.row['putawayEndTime']) ? scope.row['putawayBeginTime'] + '--' + scope.row['putawayEndTime'] : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          :label="tableText['status']"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ setStatus(scope.row['state']) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          :label="$t('common.operate.name')"
          min-width="300"
        >
          <template slot-scope="scope">
            <el-button size="small" @click="editItem(scope.row)">
              {{ $t('common.operate.edit') }}
            </el-button>
            <el-button size="small" @click="moveUp(scope.row)">
              {{ $t('common.operate.moveUp') }}
            </el-button>
            <el-button size="small" @click="moveDown(scope.row)">
              {{ $t('common.operate.moveDown') }}
            </el-button>
            <el-button size="small" @click="deleteItem(scope.row)">
              {{ $t('common.operate.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <delete-dialog
      ref="delete-dialog"
      :delete-state="deleteState"
      :loading="deleteLoading"
      @change-delete="changeDelete"
      @delete-this="deleteThis"
    />
    <pop-ups-method-dialog
      :show-dialog="pushWayDialog"
      :choose-item="pushWayItem"
      @change-dialog="changeDialog"
      @edit-success="getPushWayMethod"
    />
    <pop-ups-dialog
      ref="popUpsDialog"
      :show-dialog="editDialog"
      :choose-item="chooseItem"
      @change-dialog="changeDialog"
      @edit-success="editSuccess"
    />
  </el-row>

</template>

<script>
import { getPushWaySplashScreen, getSplashScreen, deleteSplashScreen, splashScreenMoveUp, splashScreenMoveDown } from '@/api/operation'
import deleteDialog from '@/components/delete/index.vue'
import PopUpsMethodDialog from '@/components/operation/pop-ups-method-dialog'
import PopUpsDialog from '@/components/operation/pop-ups-dialog'
export default {
  name: 'SplashScreen',
  components: {
    PopUpsDialog,
    PopUpsMethodDialog,
    deleteDialog
  },
  data() {
    return {
      loading: false,
      pushWayTitle: this.$t('appMarketing.splashScreen.prompt.pushMethod'),
      editDialog: false,
      pushWayDialog: false,
      deleteState: false,
      deleteLoading: false,
      tableData: [],
      tableText: {},
      totalNumber: 0,
      chooseItem: {
        id: null,
        name: null,
        jump: null,
        putawayBeginTime: null,
        putawayEndTime: null,
        jumpLink: null,
        url: null
      },
      pushWayItem: {
        pushWayEnum: null
      }
    }
  },
  async mounted() {
    this.tableText = this.$t('appMarketing.splashScreen.table')
    await this.getPushWayMethod()
    await this.getData()
  },
  methods: {
    setStatus(status) {
      if (status !== null) {
        const name = this.$t('appMarketing.splashScreen.state').filter(item => {
          return item.value.toString() === status.toString()
        })
        return (name.length > 0 && name[0].desc) ? name[0].desc : ''
      }
    },
    pushWay() {
      this.pushWayDialog = true
    },
    getPushWayMethod() {
      getPushWaySplashScreen()
        .then(res => {
          if (res.success) {
            this.pushWayItem.pushWayEnum = res.data
            if (res.data) {
              const name = this.$t('appMarketing.splashScreen.pushWay').filter(item => {
                return item.value.toString() === res.data.toString()
              })
              this.pushWayTitle = (name.length > 0 && name[0].desc) ? name[0].desc : ''
            } else {
              this.pushWayTitle = this.$t('appMarketing.splashScreen.prompt.pushMethod')
            }
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    getData() {
      this.loading = true
      getSplashScreen()
        .then(res => {
          this.loading = false
          if (res.success) {
            this.tableData = res.data
            this.totalNumber = res.page ? res.page['totalNumber'] : 0
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    },
    changeDelete(param) {
      this.deleteState = param
    },
    deleteItem(data) {
      this.chooseItem.id = data.id
      this.changeDelete(true)
    },
    deleteThis() {
      this.deleteLoading = true
      const id = this.chooseItem.id
      deleteSplashScreen(id)
        .then(res => {
          this.deleteLoading = false
          if (res.success) {
            this.$message.success(this.$t('common.tip.deleteSuccess'))
            this.deleteState = false
            this.getData()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.deleteLoading = false
          this.$message.error(err.message)
        })
    },
    changeDialog(data, state) {
      this[data] = state
    },
    editSuccess() {
      this.choose({})
      this.getData()
    },
    editItem(item) {
      this.choose(item)
      this.editDialog = true
    },
    addItem() {
      this.choose({})
      this.editDialog = true
    },
    choose(param) {
      this.chooseItem.id = param.id
      this.chooseItem.name = param.name
      this.chooseItem.jump = param.jump
      this.chooseItem.putawayBeginTime = param.putawayBeginTime
      this.chooseItem.putawayEndTime = param.putawayEndTime
      this.chooseItem.jumpLink = param.jumpLink
      this.chooseItem.url = param.url
      if (param.putawayBeginTime && param.putawayEndTime) {
        this.$refs.popUpsDialog.setTime(param.putawayBeginTime, param.putawayEndTime)
      }
    },
    moveUp(item) {
      const num = this.tableData.findIndex(v => {
        return v === item
      })
      if (num === 0) {
        return
      }
      this.loading = true
      const data = {
        id: item.id
      }
      splashScreenMoveUp(data)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.$message.success(this.$t('common.tip.editSuccess'))
            this.getData()
          } else {
            this.loading = false
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    },
    moveDown(item) {
      const num = this.tableData.findIndex(v => {
        return v === item
      })
      if (num === this.tableData.length - 1) {
        return
      }
      const data = {
        id: item.id
      }
      this.loading = true
      splashScreenMoveDown(data)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.$message.success(this.$t('common.tip.editSuccess'))
            this.getData()
          } else {
            this.loading = false
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-card{
    margin: 10px;
  }
</style>
